<template>
  <div>
    <div class="hang">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>二手市场</el-breadcrumb-item>
        <el-breadcrumb-item>手机通讯</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="ph">
      <h1>{{obj.title}}</h1>
      <p>
        <span>信息编号:1164497</span>
        <span>{{obj.date}}</span>
        <span style="margin:0 2px">37次</span>
        <span class="xiang">
          <i class="el-icon-share"></i>
          分享
        </span>
      </p>
    </div>
    <div class="qu">
      <div class="yu">
        <h2>
          区域:
          <span class="wen">{{obj.area}}</span>
        </h2>
      </div>
      <div class="yu">
        <p>联系人:{{obj.linkman}}</p>
        <p class="dian">
          联系电话：
          <span>
            {{obj.mobile}}
            <b>钟</b>
          </span>
        </p>
        <el-button type="success" icon="el-icon-phone" class="el">
          <i></i> 电话联系（点击拨打）
        </el-button>
      </div>
    </div>
    <h3>详细描述</h3>
    <div class="contents">
      <p>{{obj.content}}</p>
      <img src="../img/6.jpeg" alt />
    </div>
    <h3 class="tui">推荐信息</h3>
    <div class="xin">
      <ul>
        <li>
          <p>转iPhone7 Plus玫瑰金128G</p>
          <span>2019-07-09</span>
        </li>
      </ul>
      <ul>
        <li>
          <p>苹果6sp</p>
          <span>2019-07-09</span>
        </li>
      </ul>
      <ul>
        <li>
          <p>老版移动无限打，无小区限制</p>
          <span>2019-07-09</span>
        </li>
      </ul>
    </div>
    <div class="hou" @click="go">
      <p>查看更多手机通讯>></p>
    </div>
    <div class="foot">
      <ul>
        <li style="color: #5F6880;">手机版</li>
        <li>电脑版</li>
        <li>莱州论坛客户端</li>
      </ul>
      <p class="wang">联系电话：0535-2892666</p>
      <ul style="padding-bottom:10px">
        <li>莱州信息网</li>
        <li>站长统计</li>
      </ul>
      <p class="wang">法律顾问:山东生活帮律师事务所</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  mounted() {
    this.obj = this.$route.params.item;
    console.log(this.obj);
  },
  methods: {
    go() {
      this.$router.push("/detail");
    }
  }
};
</script>

<style scoped>
.hou p {
  color: #666;
  font-size: 14px;
}
.foot ul {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.foot {
  padding-top: 10px;
  margin-bottom: 36px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
.foot .wang {
  font-size: 12px;
  padding-bottom: 20px;
  color: #999;
}
.foot ul li {
  padding: 0 6px;
}
.hou {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}
.xin ul li {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
  height: 36px;
  border-bottom: 1px solid #e1e2e3;
  align-items: center;
}
.xin ul li p {
  color: #666;
}
.xin ul li span {
  color: #7a7e88;
}
.tui {
  margin-top: 10px;
  border-top: 1px solid #9c9ea8;
}
.contents img {
  width: 100%;
}
.contents {
  padding: 10px 10px 0 10px;
}
h3 {
  line-height: 45px;
  height: 45px;
  background: #f8f8f8;
  font-size: 16px;
  font-weight: bolder;
  padding-left: 10px;
  border-bottom: 1px solid #e3e3e3;
}
.el {
  font-size: 12px;
  color: #fff;
  width: 100%;
  margin-bottom: 10px;
}
.el .el-icon-phone {
  font-size: 16px;
}
b {
  color: #7a7e88;
  font-size: 14px;
}
.yu .dian {
  margin: 0 0 10px 0;
}
.yu p span {
  color: #ff7e26;
  font-weight: bolder;
  font-size: 18px;
}
.yu h2,
p {
  color: #3f4358;
  font-size: 14px;
  font-weight: normal;
  line-height: 28px;
}
.yu .wen {
  color: #7a7e88;
}
.qu {
  background-color: #ffffff;
}
.yu {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #9c9ea8;
  padding: 10px;
}
.ph p {
  padding: 15px 0 10px;
  font-size: 12px;
  color: #7a7e88;
  display: flex;
  justify-content: space-around;
}
.ph .xiang {
  color: #ff8236;
  /* float: right; */
}
.ph .el-icon-share {
  font-size: 18px;
}
.ph {
  padding: 10px 10px;
  overflow: hidden;
  background: #f6f6f6;
  border-bottom: 1px solid #e0e1e2;
}
.ph h1 {
  font-size: 18px;
  line-height: 22px;
}
.fen ul li,
.fen .ol li {
  padding: 0 5px;
}
.fen ul li.active {
  background: #ff6c00;
  color: #fff;
}
.fen .hang,
.el-breadcrumb {
  height: 32px;
  font-size: 14px;
  color: #7c7c7c;
  border-bottom: 1px solid #d8d9da;
  line-height: 32px;
  text-indent: 5px;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #7c7c7c;
  font-weight: normal;
}
.el-breadcrumb__item span {
  padding: 5px 5px 3px 5px;
}
</style>
